<template>
  <div class="clientType">
    <div class="title-container">
      <div class="left-box">
        <el-form ref="form" :model="searchForm" :inline="true" class="formClass">
          <el-form-item>
            <el-input
              prefix-icon="el-icon-search"
              type="input"
              placeholder="请输入公司名称"
              v-model="searchForm.companyName"
              style="margin-right: 10px;"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
          </el-form-item>
        </el-form>

      </div>
    </div>
    <global-card>
      <template #leftTitle>
        <perButton label="新建公司" type="primary" icon="el-icon-plus" perms="PROTOCOL_ADD"
                   @click="newCompanyClick"></perButton>
        <el-button type="success" icon="el-icon-refresh" @click="refresh">刷新</el-button>
      </template>
      <template #content>
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          style="width: 100%"
          class="elTable"
          ref="tableRef"
        >
          <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center"
          />
          <el-table-column
            prop="companyName"
            label="公司名称"
            align="center"
          />
          <el-table-column
            prop="legalRepresentative"
            label="法人代表"
            align="center"
          />
          <el-table-column prop="companyType" label="公司类型" align="center">
            <template slot-scope="scope">
              {{ scope.row.companyType == 1 ? "科技" : "文化"}}
            </template>
          </el-table-column>
          <el-table-column prop="companyAdress" label="公司地址" align="center"/>
          <el-table-column prop="employeesNum" label="人数" align="center"/>
          <el-table-column prop="introducerCode" label="介绍人编码" align="center"/>
          <el-table-column prop="introducerName" label="介绍人" align="center"/>
          <el-table-column label="合同开始时间" align="center" prop="createTime" width="170">
            <template slot-scope="scope">
              {{ scope.row.contractStartTime}}
            </template>
          </el-table-column>
          <el-table-column label="合同到期时间" align="center" prop="createTime" width="170">
            <template slot-scope="scope">
              {{ scope.row.contractEndTime }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template #default="{ row }">
              <perButton label="编辑" type="warning" size="mini" perms="PROTOCOL_EDIT"
                         @click="handlerEdit(row)"></perButton>
              <perButton label="删除" type="danger" size="mini" perms="PROTOCOL_DEL"
                         @click="handlerDelete(row)"></perButton>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template #footer>
        <pagination
          class="pagination"
          :total="count"
          :page.sync="pageIndex"
          :limit.sync="pageSize"
          @pagination="pagination"
        />
      </template>
    </global-card>

    <yc-dialog
      ref="ycDialog"
      :dialogTitle="dialogTitle"
      :centerTitle="dialogCenterTitle"
    >
      <template #content>
        <div class="dialog-content">
          <el-form
            :model="newCompanyModel"
            :rules="rules"
            ref="agreementModelRef"
            label-width="110px"
          >
            <el-form-item label="公司名称" prop="companyName">
              <el-input v-model="newCompanyModel.companyName"/>
            </el-form-item>
            <el-form-item label="法人代表" prop="legalRepresentative">
              <el-input v-model="newCompanyModel.legalRepresentative"/>
            </el-form-item>
            <el-form-item label="公司类型" prop="companyType">
              <el-select v-model="newCompanyModel.companyType">
                <el-option
                  v-for="item in companyTypeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="公司地址" prop="companyAdress">
              <el-input v-model="newCompanyModel.companyAdress"/>
            </el-form-item>
            <el-form-item label="公司人数" prop="employeesNum">
              <el-input v-model="newCompanyModel.employeesNum" type="number"/>
            </el-form-item>
            <el-form-item label="介绍人" prop="introducerCode">
              <el-select v-model="newCompanyModel.introducerCode">
                <el-option
                  v-for="item in introducerList"
                  :key="item.userCode"
                  :label="item.userName"
                  :value="item.userCode"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="服务开始时间" prop="serverDate">
              <el-date-picker
                v-model="newCompanyModel.serverDate"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" :loading="addOrUpdateLoading" @click="dialogSave">确定</el-button>
        <el-button @click="$refs.ycDialog.dialogVisible = false">取消
        </el-button>
      </template>
    </yc-dialog>

    <global-message
      v-if="isGlobalMessageShow"
      @receive="receive"
      :message="message"
    />
  </div>
</template>

<script>
  import ycDialog from "@/components/pageDialog"
  import perButton from "@/components/permissionButton"
  import {
    queryCompanyPage,
    queryCompanyList,
    insertCompanyPage,
    updateCompanyPage
  } from "@/api/corporationMessage/corporationInfo"
  import { queryAccountList } from "@/api/appUserControl/account"

  export default {
    data() {
      return {
        introducerList: [],
        companyTypeList: [
          { id: 1, name: "科技" },
          { id: 2, name: "文化" }
        ],

        tableData: [],
        pageIndex: 1,
        pageSize: 20,
        count: 0,
        searchForm: {
          agreementName: "",
          agreementType: ""
        },

        detailsDisabled: false,
        isGlobalMessageShow: false,

        dialogCenterTitle: "",
        dialogTitle: "",
        message: "",

        loading: false,
        newCompanyModel: {
          id: "",
          companyName: "",
          legalRepresentative: "",
          companyType: "",
          companyAdress: "",
          employeesNum: "",
          introducerCode: "",
          serverDate: ""
        },
        rules: {
          companyName: [
            { required: true, message: "请输入公司名称", trigger: "blur" }
          ],
          legalRepresentative: [
            { required: true, message: "请输入法人代表", trigger: "blur" }
          ],
          companyType: [
            { required: true, message: "请选择公司类型", trigger: "change" }
          ],
          introducerCode: [
            { required: true, message: "请选择介绍人", trigger: "change" }
          ],
          serverDate: [
            { required: true, message: "请选择服务开始时间", trigger: "change" }
          ],
          companyAdress: [{ required: true, message: "请输入公司地址", trigger: "blur" }],
          employeesNum: [{ required: true, message: "请输入公司人数", trigger: "blur" }]
        },
        addOrUpdateLoading: false
      }
    },
    components: {
      ycDialog,
      perButton
    },
    created() {
      this.getData()
    },
    methods: {
      async searchClick() {
        this.getData()
      },
      async getData() {
        const { agreementName, agreementType } = this.searchForm
        this.loading = true
        const data = await queryCompanyPage({
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          agreementName: agreementName,
          agreementType: agreementType
        })
        this.tableData = data.object.data
        this.count = data.object.count
        this.loading = false
      },
      pagination(pageItem) {
        this.getPageProject(pageItem.page, pageItem.limit)
      },


      handlerDelete({ id }) {
        this.$confirm("确定删除此协议吗", "删除操作", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "error",
          center: true
        }).then(async () => {
          const { status } = await updateCompanyPage({
            id,
            isDeleted: 1
          })
          if (status == 200) {
            this.getData()
            this.isGlobalMessageShow = true
            this.message = "success"
          } else {
            this.message = "error"
          }
        })
      },

      // 新建公司
      newCompanyClick() {
        this.dialogCenterTitle = "新建公司"
        this.dialogTitle = "新建公司"

        this.queryAccountList()
        Object.keys(this.newCompanyModel).forEach((item) => {
          this.newCompanyModel[item] = ""
        })

        this.detailsDisabled = false
        this.addOrUpdateLoading = false
        this.$refs.ycDialog.dialogVisible = true
      },
      handlerEdit(row) {
        this.dialogCenterTitle = "编辑公司"
        this.dialogTitle = "编辑公司"

        this.queryAccountList()

        this.newCompanyModel = {
          id: row.id,
          companyCode: row.companyCode,
          companyName: row.companyName,
          legalRepresentative: row.legalRepresentative,
          companyType: row.companyType,
          companyAdress: row.companyAdress,
          employeesNum: row.employeesNum,
          introducerCode: row.introducerCode,
          serverDate: this.timeFormat(row.serverDate)
        }

        this.addOrUpdateLoading = false
        this.detailsDisabled = false
        this.$refs.ycDialog.dialogVisible = true
      },
      timeFormat(date){
        let newDate=/\d{4}-\d{1,2}-\d{1,2}/g.exec(date)
        return newDate[0]
      },
      async queryAccountList() {
        const { object } = await queryAccountList()
        this.introducerList = object
      },
      async dialogSave() {
        this.$refs.agreementModelRef.validate(async (v) => {
          if (v) {
            this.addOrUpdateLoading = true

            if (this.detailsDisabled) {
              // 详情
              this.$refs.ycDialog.dialogVisible = false
            } else if (this.newCompanyModel.id) {
              //  编辑
              const { status, message } = await updateCompanyPage({
                ...this.newCompanyModel
              })
              if (status == 200) {
                this.$message({
                  message: message,
                  type: "success"
                })
                this.getData()
                this.$refs.ycDialog.dialogVisible = false
              }
            } else {
              const { status, message } = await insertCompanyPage({ ...this.newCompanyModel })
              if (status == "200") {
                this.$message({
                  message: message,
                  type: "success"
                })
                this.getData()
                this.$refs.ycDialog.dialogVisible = false
              }
            }
            this.addOrUpdateLoading = false
          }
        })
      },

      receive() {
        this.isGlobalMessageShow = false
      },

      refresh() {
        this.searchForm = {
          agreementName: "",
          agreementType: ""
        }
        this.getData()
      }
    }
  }
</script>
<style lang="scss" scoped>
  .clientType {
    .title-container {
      display: flex;
      justify-content: flex-end;
      margin-right: 20px;

      .left-box {
        display: flex;

        .formClass {
          /*display: flex;*/
          /*margin-right: 20px;*/

          .el-form-item {
            margin-top: 20px;
            margin-bottom: 0;

            .el-input {
              width: 216px;
            }

            .el-select {
              width: 171px;
              margin-left: 10px;
            }

            .el-date-editor {
              width: 336px;
              margin-left: 10px;
            }
          }
        }

        /*.el-button {*/
        /*  // width: 42px;*/
        /*  height: 36px;*/
        /*  margin-top: 20px;*/
        /*}*/
      }
    }
  }
</style>
